<template>
  <div class="search-page">
    <page-header title="搜索结果" :breadcrumb="[{text: '首页', link: '/'}, {text: '搜索结果'}]"></page-header>

    <div class="search-container">
      <div class="search-form">
        <el-input
          v-model="searchQuery"
          placeholder="输入关键词搜索"
          class="search-input"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button @click="handleSearch" :loading="loading">
              <el-icon><Search /></el-icon>
            </el-button>
          </template>
        </el-input>
        
        <div class="search-filters">
          <el-radio-group v-model="searchType" @change="handleSearch">
            <el-radio-button label="all">全部</el-radio-button>
            <el-radio-button label="news">新闻</el-radio-button>
            <el-radio-button label="product">产品</el-radio-button>
            <el-radio-button label="docs">文档</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <div class="search-stats" v-if="searchResults.length > 0">
        共找到 <span class="highlight">{{ searchResults.length }}</span> 条结果，耗时 {{ searchTime }}秒
      </div>
      
      <div class="search-results" v-if="searchResults.length > 0">
        <div v-for="(result, index) in displayResults" :key="index" class="search-result-item">
          <h3>
            <router-link :to="result.link">{{ result.title }}</router-link>
          </h3>
          <p class="result-description" v-html="result.description"></p>
          <div class="result-meta">
            <span class="result-type">{{ getTypeName(result.type) }}</span>
            <span class="result-date">{{ result.date }}</span>
          </div>
        </div>
        
        <el-pagination
          v-if="searchResults.length > perPage"
          :current-page="currentPage"
          :page-size="perPage"
          :total="searchResults.length"
          layout="prev, pager, next"
          @current-change="handlePageChange"
          class="pagination"
        ></el-pagination>
      </div>
      
      <div class="empty-results" v-else-if="searched && !loading">
        <el-empty description="没有找到匹配的结果" :image-size="200">
          <template #description>
            <p>没有找到与"{{ searchQuery }}"匹配的结果</p>
          </template>
          <el-button type="primary" @click="searchQuery = ''">清空搜索条件</el-button>
        </el-empty>
      </div>
      
      <div class="search-loading" v-if="loading">
        <el-skeleton :rows="5" animated />
        <el-skeleton :rows="5" animated />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import PageHeader from '../components/PageHeader.vue'

export default {
  name: 'SearchPage',
  components: {
    PageHeader,
    Search
  },
  setup() {
    const route = useRoute()
    const searchQuery = ref('')
    const searchType = ref('all')
    const searchResults = ref([])
    const loading = ref(false)
    const searched = ref(false)
    const searchTime = ref(0)
    const currentPage = ref(1)
    const perPage = 10

    // 模拟搜索结果数据
    const mockResults = [
      {
        title: '公司简介',
        description: '我们是一家专注于<span class="highlight">企业</span>服务的科技公司，致力于提供最优质的解决方案...',
        link: '/about',
        type: 'about',
        date: '2023-05-15'
      },
      {
        title: '最新企业动态：公司获得A轮融资',
        description: '近日，我司完成A轮融资，投资方为知名风投机构...',
        link: '/news/1',
        type: 'news',
        date: '2023-10-10'
      },
      {
        title: '2023年度企业招聘计划',
        description: '2023年，公司将在全国范围内招聘优秀人才，岗位包括...',
        link: '/recruits',
        type: 'recruits',
        date: '2023-09-01'
      },
      {
        title: '产品介绍：企业级SaaS解决方案',
        description: '我们的<span class="highlight">企业</span>级SaaS解决方案，专为中大型企业设计...',
        link: '/product',
        type: 'product',
        date: '2023-08-15'
      },
      {
        title: '企业文化与价值观',
        description: '公司秉承"诚信、创新、协作、卓越"的核心价值观...',
        link: '/about/team',
        type: 'about',
        date: '2023-07-20'
      },
      {
        title: '技术文档：API集成指南',
        description: '本文档详细介绍了如何将我们的API集成到您的<span class="highlight">企业</span>系统中...',
        link: '/docs/1',
        type: 'docs',
        date: '2023-06-05'
      }
    ]

    // 根据页码计算当前显示的结果
    const displayResults = computed(() => {
      const start = (currentPage.value - 1) * perPage
      const end = start + perPage
      return searchResults.value.slice(start, end)
    })

    // 获取类型名称
    const getTypeName = (type) => {
      const typeMap = {
        news: '新闻',
        product: '产品',
        docs: '文档',
        about: '关于我们',
        recruits: '招聘'
      }
      return typeMap[type] || '其他'
    }

    // 处理搜索
    const handleSearch = () => {
      if (!searchQuery.value.trim()) return
      
      loading.value = true
      searched.value = true
      
      // 模拟搜索延迟
      setTimeout(() => {
        const startTime = performance.now()
        
        // 根据类型和关键词过滤结果
        searchResults.value = mockResults.filter(item => {
          if (searchType.value !== 'all' && item.type !== searchType.value) return false
          return item.title.includes(searchQuery.value) || 
                 item.description.includes(searchQuery.value)
        })
        
        const endTime = performance.now()
        searchTime.value = ((endTime - startTime) / 1000).toFixed(2)
        
        currentPage.value = 1
        loading.value = false
      }, 800)
    }

    // 处理页码变化
    const handlePageChange = (page) => {
      currentPage.value = page
      window.scrollTo(0, 0)
    }

    // 从URL获取搜索参数
    onMounted(() => {
      if (route.query.q) {
        searchQuery.value = route.query.q
        if (route.query.type) {
          searchType.value = route.query.type
        }
        handleSearch()
      }
    })

    return {
      searchQuery,
      searchType,
      searchResults,
      loading,
      searched,
      searchTime,
      currentPage,
      perPage,
      displayResults,
      getTypeName,
      handleSearch,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.search-page {
  padding-bottom: 60px;
}

.search-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.search-form {
  margin: 30px 0;
}

.search-input {
  width: 100%;
  max-width: 600px;
}

.search-filters {
  margin-top: 20px;
}

.search-stats {
  margin-bottom: 20px;
  color: #606266;
  font-size: 14px;
}

.highlight {
  color: var(--el-color-primary);
  font-weight: 600;
}

.search-result-item {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid #ebeef5;
}

.search-result-item h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.search-result-item a {
  color: var(--el-color-primary);
  text-decoration: none;
}

.search-result-item a:hover {
  text-decoration: underline;
}

.result-description {
  color: #606266;
  margin: 0 0 10px;
  line-height: 1.6;
}

.result-meta {
  display: flex;
  font-size: 12px;
  color: #909399;
}

.result-type {
  background: #f4f4f5;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 10px;
}

.empty-results {
  margin: 60px 0;
  text-align: center;
}

.search-loading {
  margin: 30px 0;
}

.pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

:deep(.el-skeleton__paragraph) {
  padding: 0;
}
</style>
